<template>
  <div class="cus-detail">
    <div class="header">
      <div class="left">{{ form.cusType == '2' ? '供应商新增' : '客户新增' }}</div>
      <img src="@/assets/img/fork.svg" class="right" @click="cusCancel" />
    </div>
    <van-form required="auto" class="form" ref="formRef">
      <van-cell-group>
        <van-field
          v-model="form.icCardNo"
          label="卡号:"
          placeholder="请放置IC卡后点击绑卡按钮"
          readonly
        >
          <template v-slot:right-icon>
            <span class="bind-card" @click="getIcCardNumber">绑卡</span>
          </template>
        </van-field>

        <van-field
          v-model="form.cusName"
          label="名称:"
          placeholder="请输入名称"
          :rules="[{ required: true, message: '请输入名称' }]"
        >
        </van-field>

        <CodePicker
          code="CUS_CLASSIFY"
          v-model:value="form.cusClassify"
          v-model:name="form.cusClassifyName"
        >
          <van-field
            v-model="form.cusClassifyName"
            label="性质:"
            placeholder="请选择性质"
            readonly
            :rules="[{ required: true, message: '请选择性质' }]"
          >
          </van-field>
        </CodePicker>
        <van-field
          v-model="form.cusIdCard"
          label="身份证号:"
          placeholder="请输入身份证号"
          v-if="form.cusClassify == '2'"
        >
        </van-field>
        <van-field
          v-model="form.cusTaxNum"
          label="信用代码:"
          placeholder="请输入统一社会信用代码"
          v-if="form.cusClassify == '1'"
        >
        </van-field>
        <van-field v-model="form.cusMobile" label="手机号:" placeholder="请输入手机号"> </van-field>

        <van-field v-model="form.financialInfo[0].bank" label="开户行:" placeholder="请输入开户行">
        </van-field>
        <van-field
          v-model="form.financialInfo[0].bankAccountNumber"
          label="银行卡号:"
          placeholder="请输入银行卡号"
        >
        </van-field>
      </van-cell-group>
    </van-form>

    <div class="footer">
      <div class="cancel btn" @click="cancel">
        <div class="row1">取消</div>
      </div>

      <div class="submit btn" @click="submit">
        <div class="row1">保存并确认</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import CodePicker from '@/components/CodePicker.vue'
import { ref, onMounted, reactive } from 'vue'
import { showNotify } from 'vant'
import api from '@/api/index'
const route = useRoute()
const router = useRouter()

const form = reactive({
  icCardNo: '',
  cusName: '',
  //CUS_CLASSIFY

  cusClassify: '',
  cusClassifyName: '',
  cusType: '',
  cusMobile: '',
  cusIdCard: '',
  cusTaxNum: '',
  financialInfo: [
    {
      bank: '',
      bankAccountNumber: ''
    }
  ]
})
onMounted(() => {
  form.cusType = route.query.cusType
  form.cusClassify = route.query.cusType
  // 类别 值2是供应商，1是客户，跳转新增，供应商默认性质cusClassify为个人，客户默认为企业
  if (form.cusClassify == '2') {
    form.cusClassifyName = '个人'
  } else {
    form.cusClassifyName = '企业'
  }
  console.log(form)
})
function getIcCardNumber() {
  const number = window.icCardLib.readCardId()
  if (!number) {
    showNotify({
      message: '卡号读取失败',
      type: 'error'
    })
  } else {
    form.icCardNo = number
  }
}
function cancel() {
  router.back()
}
const formRef = ref(null)
async function submit() {
  await formRef.value.validate()
  api.cusAdd(form).then(() => {
    // window.android.tts('操作成功')
    router.back()
  })
}
</script>
<style lang="scss" scoped>
@import url('@/assets/style/mixins.scss');

.cus-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .form {
    flex: 1;
    height: 0;
    overflow: auto;
  }
}
</style>
<style lang="scss">
.bind-card {
  color: #1e98d7;
  border: 1px #1e98d7 solid;
  padding: 4px 10px;
  border-radius: 4px;
}
</style>
